/**
 * Created by tedi on 2018/3/20.
 各模块在自定义页面时会需要使用到chartjs控件
 */
odoo.define('lift_base.chartjs_widget', function (require) {
"use strict";

    var core = require('web.core');
    var session = require('web.session');
    var form_common = require('web.form_common');
    var formats = require('web.formats');
    var Model = require('web.Model');
    var Widget = require('web.Widget');
    var FormView = require('web.FormView');
    var ListView = require("web.ListView");

    /*柱状图*/
    var ChartJSBarWidget = Widget.extend({
        template:"chart_js_bar_template",
        init:function(parent,title,data,labels,color,active){
            this._super(parent);
            this.title = title;
            this.data = data;
            this.labels = labels;
            this.color = color;
            this.active = active;
        },
        start:function() {
            var ctx = this.$("canvas");
            this.show_bar(ctx);
        },
        destroy:function(){
            return this._super.apply(this, arguments)
        },
        show_bar:function(ctx){
            // Define a plugin to provide data labels
            Chart.plugins.register({
                afterDatasetsDraw: function(chart) {
                    var ctx = chart.ctx;

                    chart.data.datasets.forEach(function(dataset, i) {
                        var meta = chart.getDatasetMeta(i);
                        if (!meta.hidden) {
                            meta.data.forEach(function(element, index) {
                                // Draw the text in black, with the specified font
                                ctx.fillStyle = 'rgb(0, 0, 0)';
                                var fontSize = 14;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                                // Just naively convert to string for now
                                var dataString = dataset.data[index].toString();
                                // Make sure alignment settings are correct
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                var padding = 5;
                                var position = element.tooltipPosition();
                                ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                            });
                        }
                    });
                }
            });

            var myChart = new Chart(ctx, {
                type: 'bar',
                showLabels:true,
                data: {
                    labels: this.labels,
                    datasets: [{
                        label: this.title,
                        data: this.data,
                        borderWidth: 1,
                        backgroundColor:this.color,
                        datalabels: {
                            align: 'end',
                            anchor: 'start'
                        }
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                },
            });
            myChart.update();
        }
    });

    /*Line图*/
    var ChartJSLineWidget = Widget.extend({
        template:"chartjs_line_template",
        init:function(parent,title,data,labels,color){
            this._super(parent);
            this.title = title;
            this.data = data;
            this.labels = labels;
            this.color = color;
        },
        start:function() {
            var ctx = this.$el[0]; //this.$("canvas");
            this.show_line(ctx);
        },
        show_line:function(ctx){
            var self = this;
            var myChart = new Chart(ctx, {
                type: 'line',
                showLabels:true,
                data: {
                    labels: self.labels,
                    datasets: [{
                        label: self.title,
                        data: self.data,
                        borderWidth: 1,
                        backgroundColor:self.color,
                        datalabels: {
                            align: 'end',
                            anchor: 'start'
                        }
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                },
            });
            myChart.update();
        }
    });

    //雷达图
    var ChartJSRadarWidget = form_common.FormWidget.extend({
        template:"chartjs_bar_template",
        init: function(field_manager, node) {
            this._super(field_manager, node);
            this.labels = node.attrs.field_labels.split(",");
            this.field_names = node.attrs.field_names.split(",");
            this.title = node.attrs.title;
            var self = this;
            self.field_names.forEach(function(field_name){
                self.field_manager.on("field_changed:"+ field_name,self,self.show_radar);
            });
        },
        start: function () {
            this._super();
            this.show_radar();
        },
        show_radar:function(){
            var self = this;
            var data = self.field_names.map(function(field_name){
                return self.field_manager.get_field_value(field_name);
            });
            var ctx = this.$el[0];//("o-chartjs");
            var myChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: self.labels,
                    datasets: [{
                        //backgroundColor:"#f56954",
                        borderColor:"#00a65a",
                        pointBackgroundColor:"#00c0ef",
                        data: data
                    }]
                },
                options: {
                    legend: {
                        position: 'top',
                        display:false,
                    },
                    title: {
                        display: false,
                        text: self.title
                    },
                    scale: {
                        ticks: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    });

    /*饼状图*/
    var TyibsChartPie = Widget.extend({
        template:"tyibs_chart_pie_template",
        init:function(parent, chart_type, title, labels, data, bg_colors){
            this.title = title;
            this.type = chart_type;
            this.data =  {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: bg_colors,
                }]
            };
        },
        start:function(){
            var pie_chart = new Chart(this.$("canvas"),{
                type: this.type,
                data: this.data,
                scaleLabel : "<%=value%>",
            });
        }
    });

    // 带框的曲线图
    var TyibsChartLine = Widget.extend({
        template:"tyibs_chart_line_template",
        init:function(parent, chart_type, title, labels, data, bg_colors){
            this.title = title;
            this.type = chart_type;
            this.data =  {
                labels: labels,
                datasets: [{
                    label:title,
                    data: data,
                    backgroundColor: bg_colors,
                }]
            };
        },
        start:function(){
            var pie_chart = new Chart(this.$("canvas"),{
                type: this.type,
                data: this.data,
                // scaleLabel : "<%=value%>",
            });
        }
    });

    //直接使用在view视图
    //<chartjs_radar_widget/>
    core.form_tag_registry.add('chartjs_radar_widget', ChartJSRadarWidget);

    return {
        ChartJSBarWidget: ChartJSBarWidget,
        TyibsChartPie: TyibsChartPie,
        ChartJSLineWidget:ChartJSLineWidget,
        TyibsChartLine:TyibsChartLine
    };
});
